import React, { Component } from 'react';
import Login from './pages/login/login'
import Home from './pages/home/home'
import NotFount from './pages/NotFount'
import Journey from './pages/journey/journey'
import Visitor from './pages/visitor/visitor'
import DemoHooks from './Hooks/hooks';
import UseState from './Hooks/useState/useState';
import DomeuseEffect from './Hooks/useEffect/useEffect';
import TodoList from './作业案例/todolist/todolist';
import Shopping from './作业案例/购物车/shopping'
import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom'
class APP extends Component {
  state = {}
  render () {
    return (
      <div>
        <Router>
          <Routes>
            {/* 路由重定向 使用 Navigate 标签上的to属性设置重定向的路由 */}
            {/*后面跟push 会有历史记录 跟 replace 没有历史记录 */}
            <Route path='/' element={<Navigate to='/Login' push />}></Route>
            <Route path='/login' element={<Login />}></Route>
            <Route path='/home' element={<Home />}>
              {/* 嵌套子路由 */}
              {/* 设置默认子路由 需将子路由的path设为'' 并加上index  */}
              <Route path='' index element={<Visitor></Visitor>}></Route>
              {/*设置子路由 需要相对路径并带上父路由的地址 */}
              <Route path='/home/journey' element={<Journey></Journey>}></Route>
            </Route>
            {/* 设置path为"*",用于实现404页面  */}
            <Route path='*' element={<NotFount></NotFount>}></Route>
            <Route path='/UseState' element={<UseState></UseState>}></Route>
            <Route path='/DemoHooks' element={<DemoHooks></DemoHooks>}></Route>
            <Route path='/DomeuseEffect' element={<DomeuseEffect></DomeuseEffect>}></Route>
            <Route path='/TodoList' element={<TodoList></TodoList>}></Route>
            <Route path='/Shopping' element={<Shopping></Shopping>}></Route>
          </Routes>
        </Router>
      </div>)
  }
}

export default APP;